<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"  %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正在观看</title>
		<link rel="icon" href="img/title.ico" type="image/x-icon">
        <link rel="stylesheet" href="release/mui-player/dist/mui-player.min.css">
        <script src="static/js/config.js"></script>
        <script src="release/mui-player/dist/mui-player.min.js"></script>
        <script src="release/mui-player-desktop-plugin/dist/mui-player-desktop-plugin.min.js"></script>
        <link href="https://fonts.googleapis.com/css?family=Muli:300,400,500,600,700,800,900&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
        <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css">
        <link rel="stylesheet" href="css/themify-icons.css" type="text/css">
        <link rel="stylesheet" href="css/elegant-icons.css" type="text/css">
        <link rel="stylesheet" href="css/owl.carousel.min.css" type="text/css">
        <link rel="stylesheet" href="css/nice-select.css" type="text/css">
        <link rel="stylesheet" href="css/jquery-ui.min.css" type="text/css">
        <link rel="stylesheet" href="css/slicknav.min.css" type="text/css">
        <link rel="stylesheet" href="css/style.css" type="text/css">
        <!-- bootstrap5框架 -->
       	<link rel="stylesheet" href="css/bootstrap.min.css">
        <script src="js/bootstrap.bundle.min.js"></script>
    	<!-- bootstrap5框架 -->
		<style type="text/css">
		a{
    	text-decoration: none;
    	}
    	a:hover{
    	text-decoration: none;
    	}
		.textback{
			position:absolute;
			right:20px;
			color: #000;
		}
		</style>
</head>
	<body>
	<!-- Page Preloder -->
    <div id="preloder">
        <div class="loader"></div>
    </div>

    <sql:setDataSource var="snapshot" driver="com.mysql.cj.jdbc.Driver"
	url="jdbc:mysql://localhost:3306/${ SqlName }?useSSL=false&allowPublicKeyRetrieval=true&serverTimezone=UTC"
	user="${ SqlUser }"  password="${ SqlPass }"/>
	
    <!-- Header Section Begin -->
    <header class="header-section" style="position: fixed;top: 0;z-index: 99;width: 100%;">
        <div class="nav-item" style="position: relative;height: 53px;">
            <div class="container">
                <div class="nav-depart" style="position: fixed;left: 0;">
                    <div class="depart-btn">
                        <i class="ti-menu"></i>
                        <span><span style="color: #8fb0db;">Blue</span> VIDEO</span>
                        <ul class="depart-hover">
                            <li><a href="BlueVideoColle">我的收藏</a></li>
                            <li><a href="#">展览演出</a></li>
                            <li><a href="#">历史记录</a></li>
                        </ul>
                    </div>
                </div>
                <nav class="nav-menu mobile-menu">
                    <ul style="margin-left: 291px;">
                        <li><a href="BlueVideo">首页</a></li>
                        <li><a href="BlueVideoRec" style="border: none;">推荐</a></li>
                        <li>
                            <form action="SelectVideo" method="get">
                                <input class="primary-btn" type="text" id="username" name="selectvideo" style="margin-left:10px;background-color: #fff;color: black;border: none;">
                                <input class="primary-btn" type="submit" value="搜索" style="margin-right: 10px;margin-left: -4px;margin-top: 5px;border: none;">
                            </form>
                        </li>
                    </ul>
                    <ul style="position: fixed;right: -20px;">
                        <c:if test="${ user.user_name==null }">
                        	<li style="position: relative;"><a href="#" style="width: 100%;display: block;">
                            未登录
	                        </a>
	                        	<ul class="dropdown">
	                                <li><a href="BlueVideoLogin">去登录</a></li>
	                                <li><a href="BlueVideoReg">去注册</a></li>
	                            </ul>
	                        </li>
                        </c:if>
                        <c:if test="${ user.user_name!=null }">
                        <li>
                        	<a href="BlueVideoAdd">创作视频</a>
                        </li>
                        	<li style="position: relative;"><a href="#" style="width: 100%;display: block;">
                            <img src="img/UserImg/${ user.user_img }" style="position: absolute;top: 0;left: -20%;width: 38%;border-radius:100%;">
                            ${ user.user_name }
                            </a>
	                            <ul class="dropdown">
	                                <li><a href="BlueVideoUserIndex">个人信息</a></li>
	                                
	                                <li style="position: relative;">
	                                <a href="BlueVideoUserMsg">信息</a>
	                                <sql:query dataSource="${snapshot}" var="resultusermsgsum">
									SELECT COUNT(msg_log) AS usermsgsum FROM user_msg WHERE user_id = ${ user.user_id } AND msg_log = 1;
									</sql:query>
									
									<c:forEach var="rowusermsgsum" items="${ resultusermsgsum.rows }">
									<c:if test="${ rowusermsgsum.usermsgsum > 0 }">
									<div style="position: absolute;left:65px;top: 12px;background: red;border-radius: 50%;color: #fff;">
	                                	<div style="width: 25px;text-align:center;">${ rowusermsgsum.usermsgsum }</div>
	                                </div>
									</c:if>
	                                </c:forEach>
	                                </li>
	                                
	                                <li><a href="BlueVideoSeeUser?SeeUserid=${ user.user_id }">动态</a></li>
	                                <li><a href="BlueVideoUserMyVideo">我的视频</a></li>
	                                <li><a href="BlueVideoUserOut" style="color: #aaa000">退出登录</a></li>
	                            </ul>
	                        </li>
                        </c:if>
                    </ul>
                </nav>
                <div id="mobile-menu-wrap"></div>
            </div>
        </div>
    </header>
    <!-- Header End -->
		
		<c:if test="${ user.user_id != null }">
			<sql:query dataSource="${snapshot}" var="resulta">
			SELECT COUNT(videoid) AS NUM FROM video_colle WHERE user_id = ${ user.user_id } AND videoid = ${ Video.videoid };
        	</sql:query>
		</c:if>
		
		<sql:query dataSource="${snapshot}" var="resultselection">
			SELECT user_videofile.filename,video_table.* FROM user_videofile,video_table WHERE user_videofile.videoid = video_table.videoid AND user_videofile.user_id = video_table.user_id AND video_table.videoid = ${ Video.videoid };
        </sql:query>
		
		
        <div style="margin-bottom: 10px;width:62%;margin: 0 auto;margin-top: 80px;position: relative;">
        <div class="container mt-3" style="position: absolute;right: -300px;width: 300px;top:65px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;">
		  <ul class="list-group">
		    
		    <c:forEach var="row" items="${ resultselection.rows }">
		    <li class="list-group-item list-group-item-info">${ row.filename }</li>
			<sql:query dataSource="${snapshot}" var="resultselectionlist">
			SELECT user_videofile.filename,video_table.* FROM user_videofile,video_table WHERE user_videofile.videoid = video_table.videoid AND user_videofile.user_id = video_table.user_id AND user_videofile.filename = '${ row.filename }'
			</sql:query>
			</c:forEach>
			<c:forEach var="rowlistfilename" items="${ resultselectionlist.rows }">
			<c:if test="${ rowlistfilename.videoid != Video.videoid  }">
				<a href="BlueVideoPlay?VideoID=${ rowlistfilename.videoid }">
				<li class="list-group-item list-group-item-light">${ rowlistfilename.videoname }</li>
				</a>
			</c:if>
			<c:if test="${ rowlistfilename.videoid == Video.videoid  }">
				<a href="BlueVideoPlay?VideoID=${ rowlistfilename.videoid }">
				<li class="list-group-item list-group-item-primary">${ rowlistfilename.videoname }</li>
				</a>
			</c:if>
			</c:forEach>
		  </ul>
		</div>
        
            <sql:query dataSource="${snapshot}" var="resultuserindex">
			SELECT * FROM user_index WHERE user_id = ${ Video.userid };
        	</sql:query>
	        
	        <div style="display: inline-block;width: 40%;margin-bottom: 20px;">
	        	<h5>
	            <c:forEach var="row" items="${ resultuserindex.rows }">
	            <a href="BlueVideoSeeUser?SeeUserid=${ row.user_id }" style="color: #8B7B8B;">
	            <img width="50px" style="border: 1px solid #8B7B8B;border-radius: 50%" src="img/UserImg/${ row.user_img }"> ${ row.user_name }
	           	<c:if test="${ user.user_id != null }">
	           		 <c:if test="${ row.user_id != user.user_id }">
	           		 <sql:query dataSource="${snapshot}" var="rowuserindexsele">
					 SELECT COUNT(user_id) AS sumnamect FROM user_friend WHERE user_id = ${ user.user_id } AND user_myfid = ${ row.user_id };
		        	 </sql:query>
	            	<c:forEach var="rowuserfs" items="${ rowuserindexsele.rows }">
		            	<c:if test="${ rowuserfs.sumnamect == 0 }">
		            		<a href="User_GzTest?userid=${ user.user_id }&userfid=${ row.user_id }">
		            		<button style="margin-left: 10px;" type="button" class="btn btn-outline-primary">关注+</button>
		            		</a>
		            	</c:if>
		            	<c:if test="${ rowuserfs.sumnamect == 1 }">
		            		<a href="User_GzRemove?userid=${ user.user_id }&userfid=${ row.user_id }">
		            		<button style="margin-left: 10px;" type="button" class="btn btn-outline-primary">已关注</button>
		            		</a>
		            	</c:if>
	            	</c:forEach>
	            	</c:if>
	           	</c:if>
	            </a>
	            </c:forEach>
	            </h5>
	        </div>
	        <div style="display: inline-block;position: absolute;right: 0;top: 20px;">${ Video.videoname }</div>
        </div>
        
        <div id="mui-player" style="max-width: 62%;margin: auto;display: flex;"></div>

		</div>
        <div style="width: 62%;margin: 0 auto;margin-top:10px;position: relative;">
            
            <p style="width: 70%">${ Video.videotext }</p>
            <div style="position: absolute;top: 0;right: 24%;">
            	<a href="VideoDownload?videosrc=${ Video.videosrc }">
            		<span style="margin-left: 3px;"><img style="width: 25px;" src="img/xz.png"></span>
            		<p>下载</p>
            	</a>
            </div>
            <div style="position: absolute;top: 0;right: 16%;">
            	<a href="VideoGoodJob?videoid=${ Video.videoid }">
            		<span style="margin-left: 3px;"><img style="width: 25px;" src="img/dz.png"></span>
            		<p style="text-align: center;">${ Video.videogoodjob }</p>
            	</a>
            </div>
            
            <c:forEach var="rowa" items="${ resulta.rows }">
            
            <c:if test="${ rowa.NUM == 1 }">
            	<div style="position: absolute;top: 0;right: 7%;">
            	<a href="">
            		<span style="margin-left: 10px;"><img style="width: 25px;" src="img/sc.png"></span>
            		<p>已收藏</p>
            	</a>
            </div>
            </c:if>

            <c:if test="${ rowa.NUM == 0 }">
            	<div style="position: absolute;top: 0;right: 8%;">
            	<a href="AddVideoColleList?videoid=${ Video.videoid }&userid=${ user.user_id }">
            		<span style="margin-left: 3px;"><img style="width: 25px;" src="img/sc.png"></span>
            		<p>收藏</p>
            	</a>
            </div>
            </c:if>
            
            </c:forEach>
            
			<c:if test="${ user.user_id == null }">
            	<div style="position: absolute;top: 0;right: 7%;">
            	<a href="AddVideoColleList?videoid=${ Video.videoid }&userid=${ user.user_id }">
            		<span style="margin-left: 10px;"><img style="width: 25px;" src="img/sc.png"></span>
            		<p>请登录</p>
            	</a>
            </div>
            </c:if>
            
            
            
			<div style="position: absolute;top: 0;right: 0;">
            	<a href="UserVideoProt?videoid=${ Video.videoid }">
            	<span style="margin-left: 3px;"><img style="width: 25px;" src="img/jb.png"></span>
            	<p>举报</p>
            	</a>
            </div>
        </div>

        <section class="product-shop spad page-details" style="margin-top: -100px;">
            <div class="container">
                <div class="row">
                    <div class="col-lg-9">
                        <div class="product-tab">
                            <div class="tab-item">
                                <ul class="nav" role="tablist">
                                    <li>
                                        <a class="active" data-toggle="tab" href="#tab-1" role="tab">用户评论</a>
                                    </li>
                                    <li style="margin-left: 10%;width: 50%;margin-top: 0.5%;">
                                        <div class="login-form" style="position: relative;">
                                            <form action="User_Video_Text" method="post">
                                                <div class="group-input">
                                                    <input type="text" id="VideoPl" name="VideoPl">
                                                    <input type="text" id="VideoPl" name="userid" value="${ user.user_id }" style="display: none;" >
                                                    <input type="text" id="VideoPl" name="videoid" value="${ Video.videoid }" style="display: none;" >
                                                </div>
                                                <c:if test="${ user.user_name==null }">
                                                		<button style="position: absolute;top: -9%;right: -100%;width: 80%;" type="button" class="site-btn login-btn">登录后发表评论</button>
                                                </c:if>
                                                <c:if test="${ user.user_name!=null }">
                                                	<button style="position: absolute;top: -9%;right: -100%;width: 80%;" type="submit" class="site-btn login-btn">发表评论</button>
                                                </c:if>
                                            </form>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            
                            
							
                            <div class="tab-item-content" style="position: relative;">
                            
                            <sql:query dataSource="${snapshot}" var="result1">
                            select * from video_table limit 6;
                            </sql:query>
                            
                                <div style="width: 32%;position: absolute;right: -32%;top: 55px;">
                                <c:forEach var="row1" items="${ result1.rows }">
                                	<div style="margin-bottom: 10px;">
                                		<img alt="" src="Video/${ row1.videoimg }" style="width: 100%;">
                                		<p>${ row1.videoname }</p>
                                	</div>
                                </c:forEach>	
                                </div>
                                
                                <div class="tab-content" style="margin-top: -50px;">
                                    <div class="tab-pane fade-in active" id="tab-1" role="tabpanel"> 
                                        <div class="customer-review-option">
                                            <div class="comment-option">
												
                                            <sql:query dataSource="${snapshot}" var="result">
                            				SELECT user_index.user_name,user_index.user_img,videouser_text.* FROM user_index,videouser_text WHERE user_index.user_id = videouser_text.user_id AND videouser_text.videoid = ${ Video.videoid }
											</sql:query>
											
                                            <c:forEach var="row" items="${ result.rows }">
                                                <div class="co-item">
                                                    <c:if test="${ row.videousertext!=null }">
	                                                    <div class="avatar-pic">
	                                                    	<a href="BlueVideoSeeUser?SeeUserid=${ row.user_id }">
	                                                    		<img src="img/UserImg/${ row.user_img }" alt="">
	                                                    	</a>   
	                                                    </div>
	                                                    <div class="avatar-text">
	                                                        <h5>${ row.user_name } <span>时间${ row.videousertextitme }</span></h5>
	                                                        <div class="at-reply">
	                                                        	<span>${ row.videousertext }<a id="userbtext" href="#demo${ row.videotextid }" class="textback" data-bs-toggle="collapse">回复</a></span>
	                                                     
	                                                        	
	                                                        	<sql:query dataSource="${snapshot}" var="textrow">
					                            					SELECT * FROM backuser_text WHERE videotextid = ${ row.videotextid };
																</sql:query>
	                                                        	                                                                               
	                                                        	<c:forEach var="rowt" items="${ textrow.rows }">
	                                                        	<div class="co-item" style="width: 100%;height: 50px;margin-top: 10px;">
							                                                    <div class="avatar-pic">
							                                                    	<a href="BlueVideoSeeUser?SeeUserid=${ rowt.user_id }">
							                                                    		<img style="width: 40px;height: 40px;" src="img/UserImg/${ rowt.userimg }" alt="">
							                                                    	</a>   
							                                                    </div>
							                                                    <div class="avatar-text">
																					${ rowt.username }
							                                                    </div>
							                                                    <div class="avatar-text">
																					${ rowt.backtext }
							                                                    </div>
						                                          </div>
						                                          </c:forEach>
						                                          
																  <div id="demo${ row.videotextid }" class="collapse" style="margin-left: -60px;margin-top: 20px;">
																    	 <div class="co-item">
						                                                    <c:if test="${ row.videousertext!=null }">
							                                                    <div class="avatar-pic">
							                                                    	<a href="BlueVideoSeeUser?SeeUserid=${ row.user_id }">
							                                                    		<img style="width: 50px;height: 50px;" src="img/UserImg/${ user.user_img }" alt="">
							                                                    	</a>   
							                                                    </div>
							                                                    <div class="avatar-text">
							                                                        <div>
							                                                        <span>
							                                                        	<div class="login-form" style="position: relative;">
												                                            <form action="BackUserText" method="post">
												                                                <div class="group-input">
												                                                    <input style="width: 320px;" type="text" id="btext" name="btext">
												                                                    <input type="text" id="userid" name="userid" value="${ user.user_id }" style="display: none;" >
												                                                    <input type="text" id="userimg" name="userimg" value="${ user.user_img }" style="display: none;" >												                                                    
												                                                    <input type="text" id="usernames" name="usernames" value="${ user.user_name }" style="display: none;" >
												                                                    <input type="text" id="videoid" name="videoid" value="${ Video.videoid }" style="display: none;" >
												                                                    <input type="text" id="textid" name="textid" value="${ row.videotextid }" style="display: none;" >												                                                    
												                                                </div>
												                                                	<button style="position: absolute;top: -9%;right: -100%;width: 80%;" type="submit" class="site-btn login-btn">回复评论</button>
												                                            </form>
												                                        </div>
							                                                        </span>
							                                                        </div>
							                                                    </div>
						                                                    </c:if>
						                                                </div>				
																  </div>
	                                                        </div>
	                                                    </div>
                                                    </c:if>
                                                </div>
											</c:forEach>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>



        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/jquery-ui.min.js"></script>
        <script src="js/jquery.countdown.min.js"></script>
        <script src="js/jquery.nice-select.min.js"></script>
        <script src="js/jquery.zoom.min.js"></script>
        <script src="js/jquery.dd.min.js"></script>
        <script src="js/jquery.slicknav.js"></script>
        <script src="js/owl.carousel.min.js"></script>
        <script src="js/main.js"></script>
        <!-- bootstrap5框架 -->
        <script src="js/bootstrap.min.js"></script>
    	<!-- bootstrap5框架 -->
    </body>
    
        <script>
        var config = window.playerConfig;
        config.title = '${ Video.videoname }';
        config.src = 'Video/${ Video.videosrc }';
        config.poster = 'Video/${ Video.videoimg }';
        config.subtitle = {
            tracks:[
                {
                    kind:'subtitles',
                    src:'./static/subtitle/sintel-en.vtt',
                    label:'English',
                    srclang:'en',
                    default:true,
                },
                {
                    kind:'subtitles',
                    src:'./static/subtitle/sintel-de.vtt',
                    label:'中文',
                    srclang:'de',
                }
            ],
        }

        config.plugins = [
            typeof MuiPlayerDesktopPlugin == 'function' ? new MuiPlayerDesktopPlugin({
            }) : {},
        ]
        
        console.log(config);
        var mp = new MuiPlayer(config);
        
        var userbtext = document.getElementById("userbtext");
        userbtext.onclick = function(){
        	userbtext.style.opacity = 0;
        }
        
    </script>
    
</html>